<template>
  <div class="app-container eqTz">
    <el-form :model="selectForm" ref="queryForm" :inline="true" label-width="80px">
      <el-form-item label="设备编号">
        <el-input v-model="selectForm.deviceCode" placeholder="设备编号" clearablesize="small" clearable
                  @keyup.enter.native="getList"/>
      </el-form-item>
      <el-form-item label="设备名称">
        <el-input v-model="selectForm.deviceName" placeholder="设备名称" clearablesize="small" clearable
                  @keyup.enter.native="getList"/>
      </el-form-item>
      <el-form-item label="出厂编号">
        <el-input v-model="selectForm.factoryCode" placeholder="出厂编号" clearablesize="small" clearable
                  @keyup.enter.native="getList"/>
      </el-form-item>
      <el-form-item label="型号">
        <el-input v-model="selectForm.deviceModel" placeholder="型号" clearablesize="small" clearable
                  @keyup.enter.native="getList"/>
      </el-form-item>
      <el-form-item label="品牌">
        <el-input v-model="selectForm.deviceBrandsName" placeholder="品牌" clearablesize="small" clearable
                  @keyup.enter.native="getList"/>
      </el-form-item>
      <el-form-item label="设备状态">
        <el-select v-model="selectForm.deviceStatusId" @change="getList" placeholder="设备状态" size="small" clearable
                   @keyup.enter.native="getList">
          <el-option v-for="item in deviceStatusList" :key="item.id" :label="item.statusName" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="设备分类" @keyup.enter.native="getList">
        <treeSelect @deviceType="deviceTypeChange" :model="deviceVo.deviceTypeName" type="deviceType"></treeSelect>
      </el-form-item>
      <el-form-item label="所属部门" @keyup.enter.native="getList">
        <treeSelect @department="departmentChange" :model="deviceVo.departmentName" type="department"></treeSelect>
      </el-form-item>
      <el-form-item label="主子设备">
        <el-select v-model="selectForm.deviceLevel" @change="getList" size="small">
          <el-option v-for="item in [{name:'主设备',id:1},{name:'子设备',id:2}]" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
<!--      <el-form-item>-->
<!--        <el-radio-group v-model="selectForm.deviceEmployStatus" @change="getList">-->
<!--          <el-radio :label="2">已报废设备</el-radio>-->
<!--          <el-radio :label="3">已变卖设备</el-radio>-->
<!--        </el-radio-group>-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList" v-hasPermi="['equipmentGL:equipmentTZ:search']">搜索</el-button>
        <el-button type="success" icon="el-icon-plus" size="mini" @click="add" v-hasPermi="['equipmentGL:equipmentTZ:add']">添加</el-button>
        <el-button type="warning" icon="el-icon-download" size="mini" @click="exportDes(1)" v-hasPermi="['equipmentGL:equipmentTZ:export']">详细导出</el-button>
        <el-button size="mini" type="warning" icon="el-icon-download" @click="batchExport">批量导出</el-button>

        <el-upload
          style="float: right;margin:0 10px;"
          :headers="headers"
          accept=".xlsx, .xls"
          :show-file-list="false"
          :action="baseUrl()+'/device/device/excel'"
          :on-success="toLeadSuccess"
        >
          <el-button size="mini" type="info" icon="el-icon-upload" v-hasPermi="['equipmentGL:equipmentTZ:toLead']">导入</el-button>
          <el-button size="mini" type="info" icon="el-icon-upload" @click="importModel">导入模板</el-button>
        </el-upload>
      </el-form-item>

    </el-form>
    <el-table v-loading="loading" :data="list.rows" border @selection-change="handleSelectionChange" @row-click="rowClick" highlight-current-row>
      <el-table-column align="center" type="selection" width="55"/>
      <el-table-column align="center" type="index" label="序号" width="55"/>
      <el-table-column align="center" label="设备照片" width="150">
        <template slot-scope="scope">
          <el-image v-if="scope.row.devicePicture" class="image" :src="baseUrl()+scope.row.devicePicture"
                    :preview-src-list="[baseUrl()+scope.row.devicePicture]"></el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备编号" property="deviceCode" width="150">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click.stop="details(scope.row)" v-hasPermi="['equipmentGL:equipmentTZ:details']">
            {{scope.row.deviceCode}}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备名称" property="deviceName" width="150" show-overflow-tooltip/>
      <el-table-column align="center" label="设备标识" property="deviceLevel" width="100" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.deviceLevel==1?'主设备':'子设备'}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="资产编号" property="assetsCode" width="150"/>
      <el-table-column align="center" label="出厂编号" property="factoryCode" width="150"/>
      <!-- <el-table-column align="center" label="电子标签码" property="electronicLabel" :show-overflow-tooltip="true"/> -->
      <el-table-column align="center" label="设备分类" property="deviceTypeName" width="150"/>
      <!-- <el-table-column label="品牌信息" property="deviceBrandsName" align="center" width="150" show-overflow-tooltip/> -->
      <el-table-column label="规格型号" property="deviceModel" align="center" width="150"/>
      <el-table-column label="生产厂家" property="supplierName" align="center" width="150" show-overflow-tooltip/>
      <el-table-column label="购置日期" property="buyDate" align="center" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.buyDate) }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="购置金额" property="buyMoney" align="center"/> -->
<!--      <el-table-column align="center" label="负责人" property="chargeUserName" width="150"/>-->
      <el-table-column align="center" label="状态" width="150">
        <template slot-scope="scope">
          {{filtration(scope.row.deviceStatusId)}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="存放位置" property="repositoryName" width="150" show-overflow-tooltip/>
      <el-table-column align="center" label="所属部门" property="departmentName" width="150" show-overflow-tooltip/>
      <!-- <el-table-column align="center" label="当前净值" property="currentValue" width="150"/>
      <el-table-column align="center" label="理论生产节拍" property="produceBeat" width="150"/> -->
      <el-table-column align="center" label="备注" property="remark" width="150" show-overflow-tooltip/>
      <!-- <el-table-column align="center" label="设备机况" property="machineConditionName" width="150"/> -->
      <el-table-column align="center" label="设备状态" width="150" property="deviceStatusName">
        <!-- <template slot-scope="scope" v-if="scope.row.deviceEmployStatus">
          <template v-show="scope.row.deviceEmployStatus==1">正常</template>
          <template v-show="scope.row.deviceEmployStatus==2">报废</template>
          <template v-show="scope.row.deviceEmployStatus==3">变卖</template>
        </template> -->
      </el-table-column>
      <el-table-column label="操作" align="center" width="350" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click.stop="edit(scope.row)" v-hasPermi="['equipmentGL:equipmentTZ:edit']">修改</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click.stop="del(scope.row)" v-hasPermi="['equipmentGL:equipmentTZ:delete']">删除</el-button>
          <!-- <el-button size="mini" type="warning" icon="el-icon-download" @click="exportDes(1,scope.row)">详细导出</el-button> -->
          <el-button size="mini" type="warning" icon="el-icon-download" @click.stop="exportDes(2,scope.row)">履历导出</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="list.total?list.total:0"
      :page.sync="selectForm.pageNum"
      :limit.sync="selectForm.pageSize"
      @pagination="getList"
    />
    <!--  -->
    <el-drawer
      title="详细"
      :visible.sync="isDrawer"
      direction="rtl"
      size="50%">
      <el-table v-if="gridData.length>0" :data="gridData" border style="margin:auto;width:80%;">
          <el-table-column align="center" label="设备编号" property="deviceCode" width="150"></el-table-column>
            <el-table-column align="center" label="设备名称" property="deviceName"
                             :show-overflow-tooltip="true"></el-table-column>
            <!-- <el-table-column align="center" label="设备品牌" property="deviceSubsetList" :show-overflow-tooltip="true"
                             width="150"></el-table-column> -->
            <el-table-column align="center" label="设备型号" property="deviceModel" width="150"></el-table-column>
      </el-table>
      <div v-if="detailForm">
        <table border="1" rules="all" class="table">
            <tr>
              <td class="titleName">设备编号</td>
              <td class="inputName">{{detailForm.deviceCode}}</td>
              <td class="titleName">资产编号</td>
              <td class="inputName">{{detailForm.assetsCode}}</td>
              <td class="titleName">出厂编号</td>
              <td class="inputName">{{detailForm.factoryCode}}</td>
            </tr>
            <tr>
              <td class="titleName">设备名称</td>
              <td class="inputName">{{detailForm.deviceName}}</td>
              <td class="titleName">设备分类</td>
              <td class="inputName">{{detailForm.deviceTypeName}}</td>
              <td class="titleName">购买形式</td>
              <td class="inputName">
                {{detailForm.purchasingForm==1?'购买':'租赁'}}
              </td>
            </tr>
            <tr>
              <!-- <td class="titleName">品牌</td>
              <td class="inputName">{{detailForm.deviceBrandsName}}</td> -->
              <td class="titleName">规格型号</td>
              <td class="inputName" colspan="3">{{detailForm.deviceModel}}</td>
              <td class="titleName">单位</td>
              <td class="inputName">{{detailForm.deviceUnitName}}</td>
            </tr>
            <tr>
              <td class="titleName">生产厂家</td>
              <td class="inputName">{{detailForm.supplierName}}</td>
              <td class="titleName">购置日期</td>
              <td class="inputName">{{detailForm.buyDate}}</td>
              <td class="titleName">招标日期</td>
              <td class="inputName">{{detailForm.invitationDate}}</td>
            </tr>
            <tr>
              <td class="titleName">到矿日期</td>
              <td class="inputName">{{detailForm.arrivalDate}}</td>
              <td class="titleName">投产日期</td>
              <td class="inputName" colspan="3">{{detailForm.productionDate}}</td>
              <!-- <td class="titleName">预计报废日期</td>
              <td class="inputName">{{detailForm.expectedRetireDate}}</td> -->
            </tr>
            <tr>
              <td class="titleName">设备状态</td>
              <td class="inputName">{{detailForm.deviceStatusName}}</td>
              <td class="titleName">技术改造(机械方面)</td>
              <td class="inputName">{{detailForm.remouldMechanical}}</td>
              <td class="titleName">技术改造(电器方面)</td>
              <td class="inputName">{{detailForm.remouldElectric}}</td>
            </tr>
            <tr>
              <td class="titleName">所属部门</td>
              <td colspan="5" class="inputName">{{detailForm.departmentName}}</td>
            </tr>
            <tr>
              <td class="titleName">存放位置</td>
              <td colspan="5" class="inputName">{{detailForm.repositoryName}}</td>
            </tr>
            <tr>
              <td class="titleName">备注</td>
              <td colspan="5" class="inputName">{{detailForm.remark}}</td>
            </tr>
          </table>
      </div>
    </el-drawer>
    <!--  -->
    <el-dialog title="导入" :visible.sync="toLeadVisible" width="400px" append-to-body></el-dialog>
    <equipment-add v-if="isAdd" @subSetChane="addSetChane" :pid="aid"></equipment-add>
    <equipment-des v-if="isDes" @subSetChane="subSetChane" :pid="pid"></equipment-des>
  </div>
</template>

<script>
  import { getToken } from '@/utils/auth'
  import { device, deviceDel, deviceExport,exportDevDes,exportDevLl,batchExport,listSubSetId,deviceDetail } from '@/api/device/index'
  import { deviceStatus } from '@/api/basicInformation/index'
  import treeSelect from './treeSelect'

  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import chooseDepartmentDialog from '../../components/chooseDepartmentDialog'
  import equipmentAdd from './equipmentAdd'
  import equipmentDes from '@/views/components/equipmentDetails'

  export default {
    components: {
      treeSelect,
      Treeselect,
      chooseDepartmentDialog,
      equipmentAdd,
      equipmentDes
    },
    name: 'Role',
    data() {
      return {
        isAdd:false,
        selectForm: {
          pageNum: 1,
          pageSize: 10,
          deviceCode: '',
          deviceName: '',
          factoryCode: '',
          deviceModel: '',
          deviceStatusId: '',
          deviceTypeId: '',
          deviceBrandsName: '',
          departmentId: '',
          deviceEmployStatus: 1,
          deviceLevel:1
        },
        loading: false,
        list: [],
        deviceStatusList: [],
        toLeadVisible: false,
        headers: { Authorization: 'Bearer ' + getToken() },
        deviceVo:{
          deviceTypeName:'',
          departmentName:'',
        },
        aid:null,
        isDes:false,
        pid:null,
        multipleSelection:[],
        isDrawer:false,
        gridData:[],
        detailForm:null
      }
    },
    watch:{
      isDrawer(){
        if(!this.isDrawer){
          this.gridData=[]
          this.detailForm=null
        }
      }
    },
    created() {
      this.getList()
      this.getDeviceStatus()
    },
    methods: {
      async getList() {
        this.loading = true
        let res = await device(this.selectForm)
        this.list = res
        this.loading = false
      },
      /** 查询设备状态*/
      async getDeviceStatus() {
        let res = await deviceStatus()
        this.deviceStatusList = res.rows
      },
      /** 过滤状态*/
      /** 查询上级name 递归遍历 **/
      filtration(id) {
        for (let i = 0; i < this.deviceStatusList.length; i++) {
          if (this.deviceStatusList[i].id == id) {
            return this.deviceStatusList[i].statusName
          }
        }
      },
      /** 获取设备分类的值*/
      deviceTypeChange(data) {
        this.selectForm.deviceTypeId = data.id
        this.deviceVo.deviceTypeName=data.deviceName
        this.getList()
      },
      /** 获取所属部门的值*/
      departmentChange(data) {
        this.selectForm.departmentId = data.id
        this.deviceVo.departmentName=data.label
        this.getList()
      },
      /** 删除*/
      del(row) {
        this.$confirm('确定删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await deviceDel(row.deviceId)
          this.$message.success('删除成功')
          this.getList()
        }).catch(() => {
          this.$message.info('取消删除')
        })
      },
      details(row) {
        // this.$router.push({ path: '/equipmentGL/equipmentDetails', query: { data: row.deviceId } })
        this.pid=row.deviceId
        this.isDes=true
      },
      subSetChane(){
        this.isDes=false
        this.pid=null
      },
      add() {
        this.isAdd=true
        // this.$router.push({ path: '/equipmentGL/equipmentAdd' })
      },
      edit(row) {
        this.aid=row.deviceId
        this.isAdd=true

        // this.$router.push({ path: '/equipmentGL/equipmentAdd', query: { data: row.deviceId } })
      },
      /** 导出按钮操作 */
      exportList() {
        this.$confirm('是否确认导出所有用户数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let res = await deviceExport(this.selectForm)
          return this.download(res.data)
        }).catch(function() {
        })
      },
      /** 导入**/
      toLeadSuccess(res) {
        if (res.code == 200) {
          this.$message.success('导入成功！')
          this.getList()
        } else {
          this.$message.error(res.msg)
        }
      },
      addSetChane(info){
        this.isAdd=false
        this.aid=null
        if(info) this.selectForm.pageNum=1;this.getList()
      },
      async exportDes(flag,row){
        this.$confirm('是否确认导出?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let res=flag==1?await exportDevDes():await exportDevLl(row.deviceId)
          return this.download(res.data)
        }).catch(function() {
        })
      },
      importModel(){
        window.location.href = this.baseUrl()+'/profile/templateDownload/设备台账导入.xlsx'
      },
      handleSelectionChange(val){
        this.multipleSelection = val
      },
      batchExport(){
        if(this.multipleSelection.length<=0){
          this.$message.warning('请选择设备!')
          return false
        }
        this.$confirm('是否确认批量导出?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let arr=[]
          this.multipleSelection.forEach((i)=>{
            arr.push(i.deviceId)
          })
          batchExport(arr).then((res)=>{
            if(res.code==200) {
              // this.$message.success(res.msg)
              return this.download(res.data)
            }
          })
        }).catch(function() {
        })
        
        
      },
      rowClick(row, column, event){
        //点击一行
        if(row.deviceLevel==1){
          listSubSetId(row.deviceId).then((res)=>{
            if(res.code==200){
              if(res.rows.length>0){
                this.gridData=res.rows
                this.isDrawer=true
              }else{
                this.$message.warning('该父设备无子设备')
              }
            }
          })
        }else{
          //子设备
          if(row.parentId){
            deviceDetail(row.parentId).then((res)=>{
            if(res.code==200){
              this.detailForm=res.data.deviceVo
              this.isDrawer=true
            }
          })
          }else{
            this.$message.warning('该子设备无父设备')
            
          }
        }
        
        
      }
    }
  }
</script>
<style scoped lang="scss">
.eqTz{
  .table {
        border: 1px solid #cccccc;
        color: #606266;
        font-size: 14px;
        width:80%;
        margin: auto;
        .titleName {
          text-align: center;
          width: 12%;
          padding:10px 5px;
        }
        .inputName {
          width:21%;
          padding-left:10px;
        }
        .el-select{
          //width: 100%;
        }
        .el-input{
          max-width: 150px;
        }
      }
  .image {
    width: 100px;
    height: 50px
  }

  .blue {
    color: #2196F3;
    cursor: pointer
  }

  .status {
    color: white;
    width: 54px;
    height: 22px;
    display: inline-block
  }

  .green {
    background: #78BF34
  }

  .purple {
    background: #9E71DC
  }

  .orange {
    background: #DEA11E
  }
}

</style>
